<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
 		<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
		<title>注册</title>
		<style type="text/css">
			/*公共样式*/
			html, body ,p{margin:0px; padding:0px; font-family:'Microsoft YaHei' ! important; font-size:12px; color:#333333;outline:none; }
			a{text-decoration:none;}
			a:link {color:#333333;}
			a:visited {color:#333333;}
			a:hover {color:#0195df;}
			a:active{color:#333333;}
			img{border:0;}
			/*公共底脚*/
			#g_foot_bar {float:top; width:100%; min-width:1002px;  background-color:#f2f2f5;}
			#g_foot_center {width:1002px; height:190px; margin:0px auto;}
			#g_foot_center .left {float:left; width:800px; margin-top:18px;}
			#g_foot_center .left .netName {float:top; height:30px; font-size:16px; margin-bottom:4px; letter-spacing:1px; color:#3f3f3f;}
			#g_foot_center .left .intro {float:top; height:20px; line-height:20px; margin-top:4px; font-size:12px; color:#696E78;}
			#g_foot_center .left .intro a{color:#696E78;}
			#g_foot_center .left .intro a:hover {color:#0195df;}
			#g_foot_center .right {float:left; width:200px; margin-top:20px;}
			#g_foot_center .right .qr_code {float:top; width:90px; height:90px; margin-left:54px;}
			#g_foot_center .right .qr_code a{display:block;}
			#g_foot_center .right .qr_code img {width:100%; height:100%;}
			#g_foot_center .right .cp_name {float:top; width:200px; height:20px; line-height:20px; margin-bottom:4px; text-align:center; color:#3f3f3f;}
			#g_foot_center .right .tel_pos {float:top; width:170px; height:20px; margin-left:32px; color:#696E78;}
			
			/*login*/
			body{background-color: #f2f2f5;}
			.header{width:1000px;margin:80px auto 22px;overflow: hidden;}
			.header p{float:left;display:inline-block;height:30px;line-height: 30px;;}			
			.header .content{padding-left:8px;margin-left:5px;border-left:2px solid #BFBFBF;font-size: 18px;letter-spacing:3px;}
			.container{overflow: hidden;position: relative;width:100%;height:600px;margin-bottom: 20px;}
			.container .content{width:1000px;height:100%;margin:auto;overflow: hidden;background: url(img/register_img_bg.png) 517px 48px no-repeat #fff;}
			.registerPane{color: #808080;}
			.registerPane p{position:relative;margin-left:73px;margin-bottom: 20px;}
			.registerPane p:first-child{margin-top: 60px;}
			.registerPane .title{font-size: 14px;}
			.registerPane .title span{float:left;line-height: 40px;width:115px;text-align: right;margin-right:8px;}			
			.registerPane p.input{position:relative;}
			.registerPane p.input img{position: absolute;top:12px;left:128px;}
			.registerPane p.input input{padding-left:35px;width:245px;}
			.registerPane p.qrCode input{width:120px;}
			.registerPane p.qrCode img{width:82px;height:40px;position:static;margin:0;}
			.registerPane p.qrCode a{color:#38a4dc;text-decoration: underline;font-style: italic;}
			.agreeFile{padding-left:110px;font-size: 14px;}
			.agreeFile input[type=checkbox]{vertical-align: middle;margin-top:-1px;outline:none;}
			
			.registerPane p img.userInputIcon{position: absolute;top:10px;left:5px;width:25px;height:25px;}
			.registerPane p input[type=text]{border:1px solid #bfbfbf;line-height: 40px;height:40px;}
			.registerPane p input.userInput{border:1px solid #bfbfbf;line-height: 40px;padding-left:30px;width: 245px;}
			.registerPane p input.codeInput{padding-left:5px;width: 100px;}
			.qrCodeImg{vertical-align: middle;margin-left: 5px;margin-top: -4px;}
			.registerBt{padding-left:90px}
			.registerBt input {
			    position: relative;
			    width: 280px;
			    height: 43px;
			    line-height: normal;
			    letter-spacing: 3;
			    text-align: center;
			    cursor: pointer;
			    background: #0195df;
			    margin-right:17px;
			    border: none;
			    color:#fff;
			    border-radius: 2px;
				font-size: 14px;
				letter-spacing: 3px;
				outline:none;
			}
			.registerBt input:hover {
			    background: #22a9ff;
			}
			::-moz-placeholder { color: #c9c9c9; }
			::-webkit-input-placeholder { color:#c9c9c9; }
			:-ms-input-placeholder { color:#c9c9c9; }
			.registerBt input.disableBt{background-color:#eee;color:#ccc;}
		</style>
	</head>
	<body>
	<div class="header">
		<p><a href="#" title="中国教师发展网"><img src="img/fzw.png" width="220" height="30" /></a></p>
		<p class="content">欢迎注册</p>
	</div>
	<div class="container">
		<div class="content">
			<div class="registerPane">
				<p class="title">
					<span>用户名：</span>
					<p class="input">
						<img src="img/icon_user.png" />
						<input type="text" />	
					</p>					
				</p>
				<p class="title">
					<span>请输入密码：</span>
					<p class="input">
						<img src="img/icon_pswd.png" />
						<input type="text" />	
					</p>					
				</p>
				<p class="title">
					<span>请确认密码：</span>
					<p class="input">
						<img src="img/icon_pswd.png" />
						<input type="text" />	
					</p>					
				</p>
				<p class="title">
					<span>验证邮箱：</span>
					<p class="input">
						<img src="img/icon_email.png"/>
						<input type="text" />	
					</p>					
				</p>
				<p class="title">
					<span>请输入真实姓名：</span>
					<p class="input">
						<img src="img/icon_user.png" />
						<input type="text" />	
					</p>					
				</p>
				<p class="title">
					<span>请输入验证码：</span>
					<p class="input qrCode">						
						<input type="text" class="codeInput"/>	
						<img class="qrCodeImg" src="img/qrCode8cm.png" width="83" height="40" />
						<a href="#">换一个</a>
					</p>					
				</p>
				<p class="agreeFile">
					<label>
						<input type="checkbox" id="checkbox"/>我理解并同意服务
					</label>
				</p>
				<p class="registerBt"><input id="registerBt"  type="button" value="立即注册" onclick="alert('a');"/></p>
			</div>
		</div>
    </div>
	<div id="g_foot_bar">
		<div id="g_foot_center">
		    <div class="left">
			    <div class="netName">中国教师发展网</div>
				<div class="intro">合作机构：<a href="http://www.nies.net.cn/" target="_blank">中国教育科学研究院</a>   <a href="http://www.ccnu.edu.cn/" target="_blank">华中师范大学</a></div>
				<div class="intro">官方邮箱：admin@zgjsfz.com</div>
				<div class="intro">联系地址：武汉市东湖新技术开发区汤逊湖北路长城创新科技园国知大厦三楼</div>
				<div class="intro">Copyright &copy; 2015-2018 | All Rights Reserved 武汉智立教育科技有限公司</div>
				<div class="intro">鄂ICP备15018362号-1</div>
			</div>
			<div class="right">
			    <div class="qr_code">
			    	<a href="javascript:void(0);" id="QRCode"><img src="img/qrCode8cm.png"></a>
			    </div>
				<div class="cp_name">教师发展网</div>
				<div class="tel_pos">服务电话：027-65330837</div>
				<div class="tel_pos">邮政编码：433001</div>
			</div>
		</div>
	</div>
    <script type="text/javascript" src="js/jquery-1.11.1.min.js" ></script>
    <script type="text/javascript">
	$(function () {
		$('input:text').val("");
		$('input:text:first').focus();
		var $inp = $('input:text');
		$inp.bind('keydown', function (e) {
			var key = e.which;
			if (key == 13) {
				e.preventDefault();
				var nxtIdx = $inp.index(this) + 1;
				$(":input:text:eq(" + nxtIdx + ")").focus();
				//验证证不为空， enter键后提交
				if($('input.codeInput').val() != '' && nxtIdx == $('input:text').length)
				{
					alert('可以作提交表单的操作了。。');
				}
			}
		});
		
		$('input.register').on('click',function(){
			window.location.href="register.html";
		});
		
		document.getElementById("registerBt").disabled="true";
		$(".registerBt input").addClass("disableBt");
		//$('.registerBt input').unbind('mouseenter').unbind('mouseleave');
		//$('#areaSelect').attr("disabled","");
		 $("#checkbox").click(function(){
			if($("#checkbox").is(':checked')){					
				document.getElementById("registerBt").disabled="";
				$(".registerBt input").removeClass("disableBt");
			}else{
				$(".registerBt input").addClass("disableBt");
				document.getElementById("registerBt").disabled="true";
			}
		});
	});
</script> 
	</body>
</html>